/*
 * @Description: 高级搜索- 搜索范围组件
 * @Author: Rfan
 * @Date: 2022-01-23 16:00:50
 * @LastEditTime: 2023-02-26 18:10:52
 */

import { useEffect, useState } from 'react';
import { Button, Col, Row, Select, Space } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import classNames from 'classnames/bind';
import { useAdvanceContext } from '../contexts/AdvanceContext';

import styles from './scopeItem.module.scss';
import { fetchATListByFondId, fetchLevelByATId } from '@/api/archivesType';
import { selectItemByKey } from '@/utils/list';

const { Option } = Select;

const cx = classNames.bind(styles);

const ScopeItem = ({ info }: any) => {
  console.log('ScopeItem', info);

  const { leftCol, scopeList, fondsList, addScopeItem, deleteScopeItem, clearConditionList } =
    useAdvanceContext();
  const [arcList, setArcList] = useState([]);
  const [levelList, setLevelList] = useState([]);
  const [fondId, setFondId] = useState(null);
  const [aTId, setATId] = useState(null);
  const [levelIds, setLevelIds] = useState([]);

  // watch 全宗列表，有变化付第一项为默认选项
  useEffect(() => {
    console.log('effect', fondsList);
    const _fondId = fondsList.length > 0 ? fondsList[0].id : null;

    setFondVal(_fondId);
  }, [fondsList]);

  // watch 档案类型列表，有变化付第一项为默认选项
  useEffect(() => {
    console.log('effect', fondsList);
    const _ATId = arcList.length > 0 ? arcList[0].id : null;

    setATVal(_ATId);
  }, [arcList]);

  // watch 选中的全宗，重置档案类型
  useEffect(() => {
    console.log('effect fond');

    if (fondId) {
      fetchATListByFondId(fondId).then((res: any) => {
        setArcList(res.data);
      });
      setATVal(null);
    }
  }, [fondId]);

  // watch 选中的档案类型，重置层级
  useEffect(() => {
    if (aTId) {
      fetchLevelByATId(aTId).then((res: any) => {
        setLevelList(res.data || []);
      });
      setLevelVal([]);
    }
  }, [aTId]);

  // 监控查询范围，如有变化，重置条件表单
  useEffect(() => {
    // getFieldList();
    clearConditionList();
  }, [fondId, aTId, levelIds]);

  // 设置全宗数据
  const setFondVal: (val: number) => void = (val: number) => {
    info.fondId = val;
    setFondId(val);
  };
  // 设置档案类型数据
  const setATVal: (val: number) => void = (val: number) => {
    if (val) {
      const atObj: any = selectItemByKey(val, arcList);
      console.log('atObj', val, atObj);

      info.atTypeId = val;
      info.atCode = atObj.atCode;
      info.atType = atObj.atType;

      setATId(val);
    }
  };
  // 设置层级数据
  const setLevelVal: (val: number[]) => void = (val: number[]) => {
    info.levelCode = val;
    setLevelIds(val);
  };

  // 选择全宗
  const onFondChange: (val: number) => void = (val: number) => {
    console.log('change', val);
    setFondVal(val);
  };

  // 选择档案类型
  const onATChange: (val: number) => void = (val: number) => {
    console.log('change at', val);
    setATVal(val);
  };

  // 选择层级
  const onLevelChange: (val: number[]) => void = (val: number[]) => {
    console.log('change level', val);
    setLevelVal(val);
  };

  return (
    <>
      <Row className={cx('scope-item')} gutter={20}>
        <Col span={leftCol}>
          <Row gutter={20}>
            <Col span={8}>
              <Select className={cx('scope-select')} value={fondId} onChange={onFondChange}>
                {fondsList.map((item: any) => (
                  <Option key={item.id} value={item.id}>
                    {item.fondName}
                  </Option>
                ))}
              </Select>
            </Col>
            <Col span={8}>
              <Select className={cx('scope-select')} value={aTId} onChange={onATChange}>
                {arcList.map((item: any) => (
                  <Option key={item.id} value={item.id}>
                    {item.atName}
                  </Option>
                ))}
              </Select>
            </Col>
            <Col span={8}>
              <Select
                className={cx('scope-select')}
                mode="multiple"
                maxTagCount="responsive"
                value={levelIds || []}
                allowClear
                onChange={onLevelChange}
              >
                {levelList.map((item: any) => (
                  <Option key={item.level} value={item.level}>
                    {item.levelName}
                  </Option>
                ))}
              </Select>
            </Col>
          </Row>
        </Col>
        <Col span={24 - leftCol}>
          <Space>
            <Button
              type="primary"
              shape="circle"
              icon={<MinusOutlined />}
              disabled={scopeList.length <= 1}
              onClick={() => deleteScopeItem(info.id)}
            ></Button>
            <Button
              type="primary"
              shape="circle"
              icon={<PlusOutlined />}
              onClick={() => addScopeItem(info.id)}
            ></Button>
          </Space>
        </Col>
      </Row>
    </>
  );
};

export default ScopeItem;
